<template>
  <div class="header">
    <!-- 头部左侧Logo和标题 -->
    <a href="#/">
      <img class="logo" src="@/assets/img/logo.png" width="35px" />
      <span class="company">淘宝后台管理系统</span>
    </a>

    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link" @click="nameinf==null ? getLogin() : ''">
        {{nameinf==null ? '个人中心' : nameinf}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="edit">修改密码</el-dropdown-item>
        <el-dropdown-item command="logout">退出</el-dropdown-item>
      </el-dropdown-menu>
      <!-- 修改密码框 -->
      <el-dialog title="修改密码" width="450px" :visible.sync="dialogFormVisible">
        <el-form
          :rules="rules"
          ref="ruleForm"
          label-position="right"
          class="demo-ruleForm"
          :model="ruleForm"
          label-width="90px"
        >
          <el-form-item prop="oldpsw" label="旧密码 :">
            <el-input
              style="width:300px"
              placeholder="请输入旧密码"
              type="password"
              v-model="ruleForm.oldpsw"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="新密码 :" prop="newpsw">
            <el-input
              style="width:300px"
              placeholder="请输入新密码"
              type="password"
              v-model="ruleForm.newpsw"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="确定密码 :" prop="checkpsw">
            <el-input
              style="width:300px"
              type="password"
              placeholder="确定新密码"
              v-model="ruleForm.checkpsw"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editpsw">确 定</el-button>
        </div>
      </el-dialog>
    </el-dropdown>
  </div>
</template>

<script>
import { logOut, getUser } from "@/utils/auth";
import usersApi from "@/api/usersApi";
export default {
  data() {
    //功能：验证旧密码是否正确
    var validatePsw = (rule, value, callback) => {
      /*
        value:该表单的value值:密码
        callback：回调函数，返回提示信息
      */
      let psw = this.$md5(value);
      usersApi
        .login(this.userinf.username, psw)
        .then(res => {
          // console.log(res);
          if (res.data.flag) {
            //登陆成功:旧密码是正确的
            callback();
          } else {
            //登陆失败：旧密码不对
            callback(new Error("您的旧密码错误"));
          }
        })
        .catch(err => {
          callback(new Error("服务器繁忙，稍后再试"));
        });
    };
    //功能：验证新密码
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkpsw !== "") {
          this.$refs.ruleForm.validateField("checkpsw");
        }
        callback();
      }
    };
    //功能：验证确认密码
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.newpsw) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      dialogFormVisible: false,
      ruleForm: {
        oldpsw: "",
        newpsw: "",
        checkpsw: "",
        nameinf: ""
      },
      userinf: {},
      rules: {
        oldpsw: [
          { required: true, message: "旧密码不能为空", trigger: "blur" }, //用户名不能为空
          { validator: validatePsw, trigger: "blur" } //验证用户名是否存在
        ],
        newpsw: [{ validator: validatePass, trigger: "blur" }],
        checkpsw: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  },

  methods: {
    handleCommand(command) {
      // console.log(command);
      if (command == "edit") {
        //修改密码
        this.dialogFormVisible = true;
      } else if (command == "logout") {
        // console.log("退出了");
        logOut();
        this.$message({
          message: "退出成功",
          type: "success",
          duration: 2000
        });

        //跳转到登陆页
        this.$router.push("/login");
      }
    },

    editpsw() {
      this.$refs.ruleForm.validate(async res => {
        // console.log(res);
        if (res) {
          //表单正则校验通过：发送ajax进行密码的修改
          //获取：uid、username、新密码，传给接口
          try {
            let psw = this.$md5(this.ruleForm.checkpsw);
            let p = await usersApi.editPsw(
              this.userinf.username,
              psw,
              this.userinf.uid
            );
            // console.log(p);
            if (p.data.flag) {
              //修改成功
              this.dialogFormVisible = false;
              this.$message({
                message: "修改成功",
                type: "success"
              });
              //跳到登陆页
              this.$router.push("/login");
              //清除本地存储的用户信息
              logOut();
            } else {
              //修改失败
              this.$message({
                message: "修改失败",
                type: "error"
              });
            }
          } catch (err) {
            console.log(err);
          }
        } else {
          return;
        }
      });
    }
  },

  created() {
    let userinf = getUser(); //字符串 {username:xxx,uid:xxx}
    if (userinf) {
      this.userinf = JSON.parse(userinf);
    }
    this.nameinf = JSON.parse(getUser()).username || "";
  }
};
</script>

<style scoped>
.logo {
  vertical-align: middle;
  /* 上 右 下 左 */
  padding: 0 10px 0 40px;
}
.company {
  position: absolute;
  color: white;
}

.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-dropdown {
  float: right;
  padding-right: 20px;
}
</style>